<template>
  <div class="index">
    <el-container class="home-container">
      <el-header style="width: 100%; height: 6%;background-color: #cdf0fd39;">
        <div>
          <img src="../../assets/3.png" alt="" style="height: 80px;"/>
          <span style="margin-right: 80px; color:#00506e; font-family: '宋体';font-weight: 900;">宠爱有家宠物社区</span>
          <template v-for="item in relationList" :key="item.id">
            <div style="width: 180px;color: #00506e; font-family: '宋体';font-weight: 500;" >
                  <el-col style="text-align: center;" @click="goto('/'+item.path)">
                      {{item.servicename}}
                  </el-col>
            </div>
            </template>
        </div>
        <div>
          <el-button color="#626aef" round @click="addopen">发布文章</el-button>
          <el-button type="primary" round @click="persion">个人中心</el-button>
          <el-button type="danger" round @click="logout">退出</el-button>
        </div>
      </el-header>
      <el-main>
        <router-view />
        <div style="text-align: center; margin-left: -1px;">
      <el-row class="weibu">
        <el-col :span="6">
          <h3>成员介绍</h3>
          <p>邓闯</p>
          <p>张铭扬</p>
          <p>朱雪建</p>
          <p>宋立志</p>
          <p>柯圣宇</p>
        </el-col>
        <el-col :span="6">
          <h3>联系方式</h3>
          <p>QQ : 2242551679</p>
          <p>QQ : 1624620615</p>
          <p>QQ : 821503031  </p>
          <p>QQ : 2781237587</p>
          <p>QQ : 2621608199</p>
        </el-col>
        <el-col :span="6">
          <h3>服   务</h3>
          <ul>
            <li><a href="https://baike.baidu.com/item/%E5%A6%82%E4%BD%95%E5%85%BB%E5%A5%BD%E4%B8%80%E5%8F%AA%E7%8C%AB/19918993">如何养好一只猫</a></li>
            <li><a href="https://baike.baidu.com/item/%E5%A6%82%E4%BD%95%E5%85%BB%E5%A5%BD%E4%B8%80%E5%8F%AA%E7%8B%97/19918925">如何养好一只狗</a></li>
            <li><a href="https://baike.baidu.com/item/%E5%AE%A0%E7%89%A9%E5%96%82%E5%85%BB/4145863">喂养宠物</a></li>
            <li><a href="https://zhuanlan.zhihu.com/p/291097999">什么宠物最好养</a></li>
            <li><a href="https://wapbaike.baidu.com/item/%E5%AE%A0%E7%89%A9/229020">宠物分类</a></li>
          </ul>
        </el-col>
        <el-col :span="6">
          <h3>打赏</h3>
          <img src="../../assets/打赏微信.jpg" alt="" style="width: 200px;">
        </el-col>
      </el-row>
    </div>
      </el-main>
    </el-container>
  </div>
  <!-- 新增文章区域 -->
  <el-dialog v-model="dialogVisible" title="文章信息" width="30%">
    <el-form label-width="85px" size="small">
      <el-form-item label="文章标题">
        <el-input v-model="form.articletitle" type="articletitle" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="文章正文">
        <el-input v-model="form.articlemain" type="textarea" autocomplete="off" autosize></el-input>
      </el-form-item>
      <el-form-item label="上传文章图片">
        <el-upload
            class="avatar-uploader"
            ref="upload"
            action="#"
            :show-file-list="false"
            :on-change="handleChange"
            :auto-upload="false"
            list-type="picture-card"
        >
          <img
              v-if="form.articleimg"
              :src="form.articleimg"
              class="avatar"
              width="148"
              height="148"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章类型">
        <el-input v-model="form.articletype" type="text" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 认</el-button>
        </span>
    </template>
  </el-dialog>
</template>
  
  <script>
export default {
  name: "ChatHomeView",
  data(){
    return{
      user:{},
      relationList : [],
      dialogVisible: false,
      form: {},
      activePath:''
    }
  },
  created(){
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
    this.getRelationList();
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods : {
    //新增文章添加框打开方法
    addopen(){
      this.form = {};
      this.dialogVisible =true;
    },
    //进入个人中心页面
    persion(){
      //跳转到登录页面
      this.$router.push({
          name:'persion'
        })
    },
    logout(){
        //清空token
        window.sessionStorage.clear();
        //跳转到登录页面
        this.$router.push({
          name:'login'
        })
    },
    getRelationList(){
      this.relationList = this.user.relationList;
    },
    goto(url){
      this.$router.push(url);
    },
    handleChange(file) {
      const isJPG = file.raw.type.indexOf("image") !== -1;
      const isLt2M = file.raw.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }
      this.form.articleimg = file.url;
      this.file = file;
    },
    //修改新增同一个方法
    save() {
      if(this.file!=null){
        let fromdata = new FormData();
        fromdata.append("file", this.file.raw);
        this.$http.post("/oss/upload", fromdata).then((ress) => {
          if (ress.data.status == 200) {
            this.form.useraccount = this.user.account;
            this.form.articleimg = ress.data.data;
            this.$http.post("/article/", this.form).then((res) => {
              if (res.data.status == 200) {
                this.$message.success("文章发布成功，等待管理员审批！")
                this.dialogVisible = false;
                this.dialogFormVisiblepass = false;
              } else {
                this.$message.error(res.data.message);
              }
            });
          } else {
            this.$message.error(ress.data.message);
            return false;
          }
        });
      }else{
        this.$http.post("/article/", this.form).then((res) => {
          if (res.data.status == 200) {
            this.$message.success("保存成功")
            this.dialogVisible = false
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    },
  }
};
</script>
  
<style lang="scss">
.home-container{
  height: 100%;
}
.el-header {
  background-color: #cdf0fd39;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.el-header > div {
  display: flex;
  align-items: center;
}
.el-header > div > img {
  width: 130px;
  margin-right: 20px;
}
h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  margin-bottom: 10px;
}

 si {
  font-size: 1.5rem;
  margin-right: 10px;
  color: #bbb;
}
.index {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.weibu {
  background-color: #cdf0fd39;
  width: 90%; 
  margin: auto; /* 水平居中对齐 */
  font-family: '宋体';
}
</style>